<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>demo</title>
        <script src="../dist/need.js" ></script>
        <script type="text/javascript" src="../dist/canvas.js" ></script>
        <style>
        	#count{
				width:500px;
				height:500px;
				box-shadow:0 0 10px rgba(0,0,0,.5);
				border:1px solid rgb(200,200,200);
			}
        </style>
	</head>
	<body>
    	<canvas id='count'>2</canvas>
		<script type='text/javascript'>
			
			
			//放入 canvas绘制多个圆模块  依赖canvasDraw
			put('drawMany',['canvasDraw'],function(draw){
				var many = [] ;
				var dis = 5 , random = Math.random ;
				var disDraw = 3 , i = 0 ,j = 0 ;
				var randomParam = function(){
					var x = random()*draw.getWidth();
					var y = random()*draw.getHeight();
					var r = random()*300;	
					var color = 'rgb(' + parseInt(255*random()) + ',' + parseInt(255*random()) + ',' + parseInt(255*random()) + ')' ;
					var lineWidth = parseInt(20*random());
					return [x,y,r,dis,color,lineWidth,dis] ; 
				};
				var mode = {
					init : function(cxt){
						draw.init(cxt);
					} ,
					'start' : function(){
						draw.clear();
						if(i===disDraw){
							i = 0 ;
							many.push(randomParam());
						}else{
							i++ ;
						}
						for( j = 0 ; j < many.length ; j++ ){
							var one = many[j] ;
							if( one[3] <= 0 ){
								many.splice( j , 1 ) ;
								j--;
								continue ;
							}
							if( one[3] >= 360 ){
								one[6] = -one[6] ;
							}
							one[3] += one[6] ;
							draw.drawCircle.apply(draw,one);
						}
					}
				};
				return mode ;
			});
			
			//放入 canvas描绘弧线模块
			put('canvasDraw',function(){
				var defaultOption = {
					width : 500 ,
					height : 500
				} ;
				var context = null ;
				var pi = Math.PI ;
				var canvasDraw = {
					init : function(cxt,option){
						context = cxt ;
						for(var i in option) {
							if(i in defaultOption){
								defaultOption[i] = option[i] ;
							}
						}
						context.canvas.width = defaultOption.width ;
						context.canvas.height = defaultOption.height ;
					} , 
					drawCircle : function(x,y,r,deg,color,lineWidth){
						context.save();
						context.beginPath();
						context.lineCap="round";
						context.lineWidth = lineWidth ;
						context.strokeStyle = color ;
						context.arc(x,y,r,0,(deg/180*pi),false);
						context.stroke();
						context.restore();
					} ,
					clear : function(){
						context.canvas.width = defaultOption.width ;
					} ,
					getWidth : function(){
						return defaultOption.width ;
					} ,
					getHeight : function(){
						return defaultOption.height ;
					}
				} ;
				return canvasDraw ;
			});
			
			//调用代码 用need获取相应模块
			(function(w){
				
				//获取动画模块
				var animate = need('animate');
				
				//获取绘画模块
				var draw = need('drawMany');
				
				var ca = document.getElementById('count');
				
				draw.init(ca.getContext('2d'));
				
				animate.start(function(){
					draw.start();
				});
				
				
			}(window));
        
        </script>
    </body>
</html>